<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        body {
            padding-top: 50px;
            background-color: #f8f9fa;
        }
        .form-container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-control {
            width: 100%;
            padding: 8px;
            box-sizing: border-box;
        }
        .btn-register {
            width: 100%;
            padding: 10px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .btn-register:hover {
            background-color: #4cae4c;
        }
        .btn-default {
            width: 100%;
            padding: 10px;
            background-color: #f0ad4e;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-bottom: 10px;
        }
        .btn-default:hover {
            background-color: #e69513;
        }
        .form-title {
            text-align: center;
            margin-bottom: 20px;
        }
        .btn-group {
            display: flex;
            justify-content: space-between;
        }
    </style>
</head>
<body>
<div class="form-container">
    <h2 class="form-title">注册</h2>
    <form>
        <div class="form-group">
            <label for="userName">用户名:</label>
            <input type="text" class="form-control" name="username" id="userName" required>
        </div>
        <div class="form-group">
            <label for="pwd">密码:</label>
            <input type="password" class="form-control" name="password" id="pwd" required>
        </div>
        <div class="form-group">
            <label>性别:</label>
            <div>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="男" required> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="女" required> 女
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sex" value="保密" required> 保密
                </label>
            </div>
        </div>
        <div class="form-group">
            <label for="sl-identity">身份:</label>
            <select class="form-control" name="identity" id="sl-identity" required>
                <option value="学生">学生</option>
                <option value="老师">老师</option>
                <option value="管理员">管理员</option>
            </select>
        </div>
        <div class="form-group">
            <label>爱好:</label>
            <div>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" value="看书"> 看书
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" value="唱歌"> 唱歌
                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" name="hobby" value="跳舞"> 跳舞
                </label>
            </div>
        </div>
        <button type="button" id="btn-register" class="btn-register">注册</button>
        <div class="form-group btn-group">
            <button type="reset" class="btn btn-default">重置</button>
            <button type="button" class="btn btn-default" onclick="location.href='login.html'">返回登录</button>
        </div>
    </form>
</div>
<script src="./js/axios.min.js"></script>
<script>
    // 注册按钮点击事件
    document.getElementById('btn-register').onclick = function () {
        const userName = document.getElementById('userName').value;
        const pwd = document.getElementById('pwd').value;
        const identity = document.getElementById('sl-identity').value;

        // 获取单选按钮的值
        const sex = document.querySelector('input[name="sex"]:checked');

        // 获取复选框的值
        const hobby = [];
        for (let i = 0; i < document.getElementsByName('hobby').length; i++) {
            if (document.getElementsByName('hobby')[i].checked) {
                hobby.push(document.getElementsByName('hobby')[i].value);
            }
        }
        if (hobby.length === 0) {
            alert('请选择至少一个兴趣爱好');
            return;
        }

        const url = '/user/register';
        const data = {
            users: {
                "number": userName,
                "password": pwd,
                'sex': sex.value,
                identity
            },
            hobbies: hobby.map(h => ({number: userName, hobby: h}))
        };
        axios.post(url, data, {
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(res => {
            const R = res.data;
            if (R.code === 200) {
                alert('注册成功');
                // 跳转到首页
                // 保存数据到本地浏览器
                localStorage.setItem('user', JSON.stringify(R.data));
                location.href = '../index.html';
            } else {
                alert(R.msg);
            }
        });
    }
</script>
</body>
</html>
